<template>
  <div class="app-container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb-container">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <a @click="goToCourse">课程</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a @click="goToCourseDetail">{{ courseName || '课程详情' }}</a>
        </el-breadcrumb-item>
        <el-breadcrumb-item>
          <a @click="goToStage">{{ stageName || '阶段信息' }}</a>
        </el-breadcrumb-item>
        <!-- <el-breadcrumb-item>
          <a @click="goToCase">{{ caseName || '案例信息' }}</a>
        </el-breadcrumb-item> -->
        <el-breadcrumb-item>
          <span>{{caseName}}</span>
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    
    <el-tabs v-model="activeTab" @tab-change="handleTabChange">
      <el-tab-pane label="学生任务记录" name="submit">
        <submit-component :case-id="caseId" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { useRoute, useRouter } from 'vue-router';
import SubmitComponent from './index.vue';

const route = useRoute();
const router = useRouter();
const caseId = ref(route.query.caseId);
const caseName = ref(route.query.caseName);
const stageId = ref(route.query.stageId);
const stageName = ref(route.query.stageName);
const courseId = ref(route.query.courseId);
const courseName = ref(route.query.courseName);
const activeTab = ref('submit');

function handleTabChange(tabName) {
  activeTab.value = tabName;
}

// 导航方法
function goToCourse() {
  router.push('/coursemanagement/course');
}

function goToCourseDetail() {
  router.push({
    path: '/coursemanagement/coursedetail',
    query: { id: courseId.value, courseName: courseName.value }
  });
}

function goToStage() {
  router.push({
    path: '/coursemanagement/casedetail',
    query: { courseId: courseId.value, courseName: courseName.value ,stageId:stageId.value}
  });
}

function goToCase() {
  router.push({
    path: '/coursemanagement/casedetail',
    query: { 
      stageId: stageId.value, 
      stageName: stageName.value,
      courseId: courseId.value,
      courseName: courseName.value
    }
  });
}
</script>

<style scoped>
.app-container {
  padding: 20px;
}

.breadcrumb-container {
  margin-bottom: 20px;
}

.breadcrumb-container a {
  color: #409EFF;
  cursor: pointer;
  text-decoration: none;
}

.breadcrumb-container a:hover {
  color: #66b1ff;
}
</style>